import React,{PureComponent} from 'react'
import {
    ScrollView, Dimensions, StyleSheet, View, Image, Text, TouchableOpacity, Button, Animated,
    ToastAndroid
} from 'react-native'
import EditAddressScene from "../../page/mine/address/EditAddressScene";
import color from "../color";

const {width} = Dimensions.get('window')


type Props = {
    navigation:any,
    info:Object,
    deletePress:Function,
    editPress:Function,
    defaultPress:Function,
    onPress:Function,
}


export default class MineAddressListCell extends PureComponent<Props>{


    render(){
        let {info} = this.props
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={()=>{this.props.onPress()}}>
                   <View>
                        <View style={{flexDirection:'row', alignItems:'center',marginTop:20}}>
                            <Text style={styles.show}>收货人</Text>
                            <Text style={styles.show_data}>{info.receiver}</Text>
                        </View>
                       <View style={{flexDirection:'row', alignItems:'center',marginTop:20}}>
                           <Text style={styles.show}>手机号码</Text>
                           <Text style={styles.show_data}>{info.mobile}</Text>
                       </View>
                       <View style={{flexDirection:'row', alignItems:'center',marginTop:20}}>
                           <Text style={styles.show}>所在地区</Text>
                           <Text style={styles.show_data}>{info.city_name}</Text>
                       </View>
                       <View style={{flexDirection:'row', alignItems:'center',marginTop:20}}>
                           <Text style={styles.show}>详细地址</Text>
                           <Text style={styles.show_data}>{info.address}</Text>
                       </View>
                   </View>
                    <View style={{width:width - 24,height:1,backgroundColor:'#DFDFDF',marginTop:20}}/>
                    <View style={{flexDirection:'row',justifyContent:'center',marginTop:20,marginBottom:20}}>
                        {this.renderDefaultImage(info.isDefault)}
                        <View style={{flex:1,}}/>
                        <TouchableOpacity style={styles.edit_btn} onPress={()=>{
                            this.props.editPress()
                        }}>
                            <Image source={require('../../../res/img/mine/address_edit.png')}/>
                            <Text style={styles.edit_text}>编辑</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={()=>{this.props.deletePress()}} style={[styles.edit_btn,{marginLeft:20}]}>
                            <Image source={require('../../../res/img/mine/address_delete.png')}/>
                            <Text style={styles.edit_text}>删除</Text>
                        </TouchableOpacity>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }

    renderDefaultImage(isOn){
        if (isOn == 1){
            return <TouchableOpacity style={{flexDirection:'row',justifyContent:'center',alignItems:"center"}}>
                <Image source={require('../../../res/img/detail/detail_select.png')}/>
                <Text style={{marginLeft:4}}>默认地址</Text>
            </TouchableOpacity>
        }else{
            return <TouchableOpacity style={{flexDirection:'row',justifyContent:'center',alignItems:"center",}} onPress={()=>{this.props.defaultPress()}}>
                <Image source={require('../../../res/img/detail/detail_un_select.png')}/>
                <Text style={{marginLeft:4}}>设为默认地址</Text>
            </TouchableOpacity>
        }
    }

}
const styles = StyleSheet.create({
    container:{
        marginLeft:12,
        marginRight:12,
        backgroundColor:'white',
        borderRadius:5,
        flex:1,
        shadowColor:'#B5B5B6',
        shadowOffset:{h:2,w:2},
        shadowRadius:1,
        shadowOpacity:0.4,
        paddingLeft:12,
        paddingRight:12,
        marginTop:6
    },
    edit_btn:{
        borderColor:'#B0B0B0',
        borderWidth:1,
        borderRadius:3,
        backgroundColor:'white',
        width:54,
        height:24,
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
    },
    edit_text:{
      fontSize:10,
      color:'#202020',
        marginLeft:2,
    },
    show:{
       fontSize:14,
        fontWeight:'200',
        color:'#000000',
        width:60,
    },
    show_data:{
        fontSize:14,
        fontWeight:'bold',
        color:'#000000',
        marginLeft:20,
        width:200
    },

})